<template>
  <view class="task_list">
    <view class="pures-header" >
      <view class="pures-header-top">
        <u-navbar  :is-back="true" back-icon-color="#ffffff" :custom-back="handleBack" :background="{background: 'none'}" :is-fixed="false" :border-bottom="false">
          <view class="pures_header_title">赏金笔记</view>
        </u-navbar>
        <!-- 店铺选择 -->
        <view class="pures-header-shop">
          <text style="color: #FFFFFF;font-size: 32rpx;">{{ shopName }}</text>
          <!--<shop-list-pop :AllShopsList="shopListData" :firstShop="firstShop" :isIcon="isIcon" :noteCurrent="noteCurrent" @changeShop="changeShop" :style="{color: '#ffffff', fontSize: '32rpx'}"></shop-list-pop>
          <image @click="notePopShow = true" :src="shopImgUrl + 'code_shop/note-list-head-icon.png'" style="width: 44rpx;height: 44rpx;"></image>-->
        </view>
      </view>
    </view>
    <view class="task_details-content">
      <scroll-view
          :scroll-y="true"
          :refresher-enabled="true"
          @refresherrefresh="onrefresherrefresh"
          :refresher-triggered="isTriggered"
          refresher-default-style="none"
          lower-threshold="30"
          @scrolltolower="onScrolltolower"
          style="height: 100%">
        <view class="details_scroll">
          <!-- 加载中提示 -->
          <view class="lanjiazai_wrap" v-if="skeletonLoading">
            <view class="lanjiazai_item">
              <u-loading mode="circle" :color="'#FFA844'" size="80" ></u-loading>
              <view class="tag">加载中...</view>
            </view>
          </view>
          <!--笔记详情列表数据-->
          <view v-for="(taskItem, index) in taskNoteList" :key="index" class="task_note_item">
            <task-note-item  :taskItem="taskItem" />
          </view>

          <!--加载更多-->
          <view class="chudijiazai">
            <u-loadmore icon-type="flower" :status="loadingstatus" font-size="24" :load-text="loadText" margin-top="30"
                        margin-bottom="30"/>
            <view v-if="Bottomingrefresh == true" class="Bottomingrefresh" @click="RefreshBtn()">立即刷新</view>
          </view>
          <view v-if="taskNoteList.length == 0" class="noDatas" :style="{marginTop:tabsHeight + navbarHeight + 'px'}">
            <u-empty text="暂无订单" mode="favor" icon-size="106"></u-empty>
          </view>
        </view>
      </scroll-view>
    </view>

    <!--筛选弹窗-->
    <u-popup v-model="notePopShow" mode="bottom" border-radius="34" >
      <view class="note-pop-wrap">
        <view v-for="(item, index) in notePopData" :key="index" class="note-pop-item">
          <view class="note-pop-item-title">{{item.title}}</view>
          <view class="note-pop-item-content">
            <view v-for="(item2,  index2) in item.list" :key="index2" class="note-pop-item-content-item" :style="{'width': item2.type == 'date' ? '220px' : ''}">
              <button v-if="item2.type  == 'text'" @click="ClickBtnMenus(item,item2,index)" class="mini-btn"
                      :class="{'active':item2.selected === 1}" size="mini">
                {{ item2.title }}
              </button>
              <view v-if="item2.type  == 'date'" class="pures-list-tab-right" :class="{'active':item2.selected === 1}">
                <view @click="timeClick(item, item2, index)" class="date-click"></view>
                <u-input type="text" v-model="beginDate" :placeholder="item2.title" placeholder-style="color:#888888;" style="width: 100%" disabled />
                <u-icon name="calendar" color="#888888" size="35"></u-icon>
              </view>
            </view>
          </view>
        </view>
        <view class="note-pop-btn">
          <u-button shape="circle" type="info" class="note-pop-btn-item" @click="cancelFun">重置</u-button>
          <u-button shape="circle" type="warning" class="note-pop-btn-item" @click="submitFun">确定</u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import TaskNoteItem from "@/subPackagePurse/note-list/components/task-note-item.vue";
import ShopListPop from "@/components/shop-list/shop-index-pop.vue";
const app = getApp();
export default {
  components: {ShopListPop, TaskNoteItem},
  data() {
    return {
      shopImgUrl: app.globalData.shopImgUrl,
      imgurlBwc: app.globalData.imgurlBwc,
      statusBarHeight: '', //顶部安全区域高度
      windowHeight: '', // 获取屏幕高度
      headerHeight: '',// 获取头部高度
      navbarHeight: '', // 导航栏高度
      shopDetailData: [], //店铺列表数据
      taskNoteList: [], // 任务笔记列表
      dataListId: '', // 笔记列表记录id
      shopName: '', // 店铺名称
      skeletonLoading: true, //加载中图片
      Bottomingrefresh: false,
      loadingstatus: 'loading',
      loadText: {
        loadmore: '轻轻上拉',
        loading: '加载中...',
        nomore: '没有更多了'
      },
      failTimeOutShow: false,
      zanwuloc: true,
      isTriggered: false, // 下拉刷新
      pageSize: 1, //  当前页数
      // 平台数据
      platformData: [
        {
          platformType: 1,
          title: '小红书',
          image: '/note/platform-xhs.png',
          fileList: [],
        },
        {
          platformType: 2,
          title: '抖音',
          image: '/note/platform-dy.png',
          fileList: [],
        },
        {
          platformType: 3,
          title: '大众点评',
          image: '/note/platform-dzdp.png',
          fileList: [],
        },
        {
          platformType: 4,
          title: '美团',
          image: '/note/platform-mt.png',
          fileList: [],
        },
      ],
      shopListData: [], //店铺列表数据
      firstShop: '', //第一家店铺
      isIcon: false, //是否显示店铺图标
      notePopShow: false, //筛选弹窗是否显示
      notePopData: [
        {
          id: 1,
          title: '核销时间',
          selected: 0,
          list: [
            {
              id: '1-1',
              pid: 1,
              title: '近七天',
              type: 'text',
              selected: 0,
            },
            {
              id: '1-2',
              pid: 1,
              title: '近一月',
              type: 'text',
              selected: 0,
            },
            {
              id: '1-3',
              pid: 1,
              title: '开始/结束日期',
              type: 'date',
              selected: 0,
            },
          ]
        },
        /* {
          id: 2,
          title: '笔记要求平台',
          selected: 0,
          list: [
            {
              id: 1,
              pid: 2,
              title: '小红书',
              type: 'text',
              selected: 0,
            },
            {
              id: 2,
              pid: 2,
              title: '大众点评',
              type: 'text',
              selected: 0,
            }
          ]
        } */
      ],
      submitData: [], //提交的筛选数据
    };
  },
  onLoad(options) {
    let that = this
    if (options.id){
      this.dataListId  = options.id
    }
    if (options.shop_name){
      this.shopName  = options.shop_name
    }
    // 获取笔记列表数据方法
    this.GetNoteListData()
  },
  onShow() {
    let that = this
  },
  methods: {
    // 下拉刷新
    onrefresherrefresh(){
      let that = this
      that.skeletonLoading = true
      that.pageSize = 1
      // 开启 下拉刷新
      that.isTriggered = true
      // 下拉刷新清空数据
      // that.noteListData = []
      setTimeout(function () {
        that.GetNoteListData()
        uni.stopPullDownRefresh();
        // 关闭 下拉刷新
        that.isTriggered = false
      }, 1500);
    },
    //触底加载
    onScrolltolower() {
      // console.log('已滚动到底部');
      let that = this
      that.loadText.nomore = '没有更多了'
      that.Bottomingrefresh = false
      that.loadingstatus = 'loading';
      if (that.zanwuloc == true) {
        setTimeout(function () {
          that.pageSize++;
          that.GetNoteListData()
          uni.hideNavigationBarLoading()
        }, 500);
      } else {
        setTimeout(function () {
          uni.hideNavigationBarLoading()
        }, 500);
      }
    },

    // 筛选弹窗事件
    ClickBtnMenus(clickItem1,clickItem,clickIndex) {
      let that = this
      console.log("点击了分类==", clickItem1.title, clickItem, clickIndex)
      // 实现选中不同的分类
      const oldData = that.notePopData
      oldData.forEach((item, index) => {
        item.list.forEach((item2, index2) => {
          if(clickIndex === index){
            item2.selected = 0
          }
        })
      })
      oldData.forEach((item, index) => {
        item.list.forEach((item2, index2) => {
          if(item2.type == 'date' && clickItem.pid === item2.pid){
            that.beginDate  = ''
          }
          if(clickItem.title === item2.title){
            item2.selected = 1
          }
        })
      })
      this.$nextTick(() => {
        that.FenLeiList = oldData
      })

    },
    // 确认筛选事件
    submitFun(){
      let that = this
      // 获取今天的日期
      let today = this.$dateFns.format(new Date(), 'yyyy-MM-dd');
      // 获取七天前的日期
      let sevenDaysAgo = this.$dateFns.format(this.$dateFns.subDays(new Date(), 7), 'yyyy-MM-dd');
      // 获取一个月前的日期
      let oneMonthAgo = this.$dateFns.format(this.$dateFns.subMonths(new Date(), 1), 'yyyy-MM-dd');
      console.log('日期==', sevenDaysAgo)
      // 提交数据前清空要提交的数据
      that.notePopData.forEach((item, index) => {
        item.list.forEach((item2, index2) => {
          if(item2.selected === 1){
            if (item2.type == 'date'){
            } else {
              // 筛选赋值当天时间
              that.endDate = today
              if (item2.id === '1-1'){ //  近七天
                that.startDate = sevenDaysAgo
              } else if (item2.id === '1-2'){ // 近一个月
                that.startDate = oneMonthAgo
              }
            }
          }
        })
      })
      // 关闭弹窗
      that.notePopShow = false
      // 调用获取订单列表，重新加载数据
      that.GetOrderList()

    },
    // 重置筛选
    cancelFun(){
      let that = this
      that.notePopData.forEach((item, index) => {
        item.list.forEach((item2, index2) => {
          item2.selected = 0
        })
      })
      // 重置时间
      that.startDate = ''
      that.endDate = ''
      // 调用获取订单列表，重新加载数据
      that.GetOrderList()
    },

    // 笔记列表数据
    GetNoteListData(){
      let that = this
      that.$api.GetCompletedNotesDetailsAPI({
        id: that.dataListId,
        page: that.pageSize,
        limit: 10,
      }).then(res => {
        if (res.data.code === 200){
          console.log('笔记列表数据', res.data.result)
          // 重新组装笔记平台内容
          res.data.result.forEach(function (item, index) {
            // 外部方法处理好数据，并返回到数据中
            item.order_notes = that.platformDataFun(item.order_notes)
          });
          that.loadText.nomore = '没有更多了'
          that.Bottomingrefresh = false
          if (that.pageSize !== 1) {
            if (res.data.result.length !== 0) {
              that.loadingstatus = 'loading';
              that.taskNoteList = that.taskNoteList.concat(res.data.result)
              console.log('订单列表=', that.noteListData);
            } else {
              that.loadingstatus = 'nomore'
            }

          } else {
            that.taskNoteList = res.data.result
            that.loadingstatus = 'nomore';
          }
          that.skeletonLoading = false
          console.log('任务笔记列表=', that.taskNoteList)
        }

      })
    },
    // 循环平台数据，重新组装笔记内容
    platformDataFun(data){
      let that = this
      let newList = []
      let imgArr = []
      data.forEach(function (item, index) {
        that.platformData.forEach(function (platItem, platIndex) {
          if (platItem.platformType === item.platform_type) {
            item.images = JSON.parse(item.images);
            newList.push({
              "id":  item.id,
              "order_id": item.order_id,
              "user_id": item.user_id,
              "shop_id": item.shop_id,
              "shop_package_id": item.shop_package_id,
              "platform_type": item.platform_type,
              "url": item.url,
              "images": item.images,
              "create_time": item.create_time,
              "update_time": item.update_time,
              "platTitle": platItem.title,
              "platImg": platItem.image,
            })
          }
        })
      });
      // console.log('平台数据', newList)
      return  newList
    },

  },

}
</script>

<style lang="scss">
page{
  height: 100%;
  background: #F4F4F4;
}
.task_list{
  height: 100%;
  display: flex;
  flex-direction: column;
  position:relative;
}
// 顶部导航栏css
.pures-header{
  position: relative;
  z-index: 11;
  .pures-header-top{
    background: url("https://td.lszbg.com/public/uploads/code_shop/note-list-head-bg.png") no-repeat;
    background-size: 100% 100%;
    .pures_header_title{
      width: 100%;
      color: #FFFFFF;
      text-align: center;
      padding-left: 88rpx;
    }
    /* 笔记分类css */
    .pures_header_tab{
      width: 100%;
      height: 80rpx;
    }
    .pures-header-box{
      height: 80rpx;
      line-height: 80rpx;
      position: relative;

      .back-icon{
        position: absolute;
        padding: 20rpx;
        z-index: 10;
      }
      .pures-header-text{
        color: #FFFFFF;
        text-align: center;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        z-index: 1;
      }
    }
    .pures-header-shop{
      height: 100rpx;
      padding: 30rpx;
      display: flex;
      justify-content: space-between;
    }
  }
  .pures-header-content{

    .pures-head-tab{
      .u-badge{
        top: 24rpx !important;
        font-size: 38rpx !important;
        color: #FF8421 !important;
        background: none !important;
      }
    }


  }
}

.task_details-content{
  flex: 1;
  overflow-y: auto;
  .details_scroll{
    padding: 20rpx;
  }
}
/* 懒加载css */
.lanjiazai_wrap {
  position: relative;
  z-index: 10000;
  text-align: center;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  color: #999;
  padding: 50rpx 0;
  .lanjiazai_item {
    text-align: center;
    .loading_icon {
      width: 120rpx;
      height: 120rpx;
    }
    .loading_gif {
      width: 120rpx;
      height: 120rpx;
    }
  }
}
// 筛选笔记css
.note-pop-wrap{
  padding-top: 30rpx;
  padding-left: 30rpx;
  padding-right: 30rpx;
  padding-bottom: constant(safe-area-inset-bottom);
  /* 兼容 iOS < 11.2 */
  padding-bottom: env(safe-area-inset-bottom);
  /* 兼容 iOS >= 11.2 */
  .note-pop-item {
    .note-pop-item-title {
      font-size: 28rpx;
      font-weight: bold;
      color: #3D3D3D;
      line-height: 60rpx;
    }
    .note-pop-item-content {
      display: flex;
      flex-wrap: wrap;
      .note-pop-item-content-item {
        display: inline-block;
        margin-right: 20rpx;
        position: relative;
        margin-bottom: 20rpx;
        .btn-img1 {
          width: 84rpx;
          height: 38rpx;
          position: absolute;
          top: -16rpx;
          right: 0;
        }
        .btn-img2 {
          width: 96rpx;
          height: 38rpx;
          position: absolute;
          top: -16rpx;
          right: 0;
        }
        .pures-list-tab-right{
          width: 100%;
          background: #F6F6F6;
          padding: 0 10rpx;
          border-radius: 10rpx;
          display: flex;
          justify-content: space-between;
          position: relative;
          .date-click  {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: 10;
          }
        }
      }

      .mini-btn {
        background-color: #F6F6F6;
        border: none; /* 去掉按钮本身的边框 */
        box-shadow: none;
        padding: 8rpx 20rpx;
      }

      .active {
        color: #FF7900;
        border: 1px solid #FFBB7D;
        background: #FFF7EF;
      }

      /* 去掉伪元素上的边框 */
      .mini-btn::after {
        border: none;
      }
    }
  }
  .note-pop-btn{
    display: flex;
    .note-pop-btn-item {
      margin: 0 10rpx;
      width: 50%;
    }
  }

  .active {
    color: #FF7900;
    border: 1px solid #FFBB7D;
    background: #FFF7EF;
  }
}
</style>
